<template>
  <div id="testlistpanel">
    <div style="height: calc(100% - 30px - 40px - 2px - 38px)">
      <div class="main-img" ref="mainImg" v-loading="loading" :style="{ height:'calc(100% - 40px)' }">
        <el-scrollbar height="100%">
          <ul class="img-box">
            <li v-for="(item, index) in wLFileList" :key="index" :style="{
              width: imgWidth + 'px',
              height: imgHeight + 'px',
            }">

              <el-image :src="picUrlBase + item.imageUrl" :preview-src-list="wLFullPathFileList" :initial-index="index"></el-image>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref ,getCurrentInstance,onMounted} from 'vue';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import 'vxe-table/lib/style.css'

let images: any = reactive([]); //图片信息集合
let disabled =  ref(true);
let picUrlBase = (window as any).apiUrl.VITE_SERVER_URL;
// 默认上传文件列表
let wLFileList = reactive([]);
let wLFullPathFileList = reactive([]);
let currentFileList =reactive([]); //当前选中的文件数组
let maininfoId = ref(''); //接收传过来的检验结果id
let id = ''; //接收传过来的检验结果id
let imgWidth = null;
let imgHeight = null; //图片高度，图片宽高比需要为4:3
let loading = false;


// 请求参数数据
const paramData = reactive({
  rptGroup:'',
  sampleda:'',
  sampleNo:'',
  id: id //检验图片id
});

defineExpose({
  getImageData,cleanData
})


function cleanData(){
  wLFileList.length=0;
}

// 页面加载列表
function getImageData(repData: any) {
  maininfoId=repData.id;
  paramData.rptGroup = repData.rptGroup;
  paramData.sampleda = repData.sampleda;
  paramData.sampleNo = repData.sampleNo;
  getImage();
}

// 获取工作列表
function getImage() {
  const url = '/lab/rptresultImage/findImagesByMaininfoId';
  const data = {
  };
  proxy.$http
      .get(url, { params: {rptGroup:paramData.rptGroup,sampleda:paramData.sampleda,sampleNo:paramData.sampleNo} })
      .then(async (res: any) => {
        res.data.forEach(item => {
          item.isChecked = false;
        });
        currentFileList.length=0;
        wLFullPathFileList.length=0;
        wLFileList.length=0;
        wLFileList.push(...res.data);
        wLFileList.forEach(item => {
          wLFullPathFileList.push((window as any).apiUrl.VITE_SERVER_URL + item.imageUrl);
        });
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}
</script>
<style lang="scss" scoped>
#testlistpanel {
  height: 100%;
  // 附加按钮间距
  .button-red {
    margin: 5px 0 5px 5px;
  }
  // 中间table表格
  .tableBody {
    height: 50%
  }
  img:hover {
    transform: scale(1.2);
  }
  :deep(.vxe-body--row) {
    height: 80px;
  }
  .main-img {
    ul.img-box {
      margin: 0;
      padding: 0;
      list-style-type: none;
      overflow: hidden;

      >li{
        position: relative;
        display: inline;//让li横向排列
        padding: 5px;
        float: left;
        /*     text-decoration: none;
             list-style: none;//去掉li前面的圆点
             display: inline;//让li横向排列
             border: 1px solid #FFFFFF;
             background-color: #30DDEB;*/
      }

      .el-image {
        width: 200px;
        height: 200px;
        border: 1px #aaa solid;
        box-sizing: border-box;
      }
      .el-checkbox {
        position: absolute;
        top: 5px;
        left: 6px;
      }
      .el-link {
        position: absolute;
        top: 0px;
        right: 0px;
        i {
          margin-right: -2px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>